import React,{Fragment} from 'react'
import {Card,Form,Button,Table,Modal,message} from 'antd'
//import moment from 'moment'
import Axios from './../../axios'
//import Utils from './../../utils/utils'
import BaseForm from './../../components/BaseForm'

const FormItem = Form.Item
// const SelectOption = Select.Option

export default class Order extends React.Component{
    state={
        page:1,
        orderInfo:[],
        showModal:false
    }
    params={
        page:1
    }

    formList = [
        {
            type:'SELECT',
            field:'city',
            label:'城市',
            placeholder:'',
            initialValue:'0',
            width:80,
            list:[{ value: '0', name: '全部' }, { value: '1', name: '北京' }, { value: '2', name: '天津' }, { value: '3', name: '上海' }]
        },
        {
            type: '时间查询'
        },
        {
            type: 'SELECT',
            label: '订单状态',
            field:'order_status',
            placeholder: '',
            initialValue: '0',
            width: 150,
            list: [{ value: '0', name: '全部' }, { value: '1', name: '进行中' }, { value: '2', name: '结束行程' }]
        }
    ]
    componentWillMount() {
        this.requestList()
    }
    //查询功能
    handleQuery = (data) => {
        this.params = data
        this.requestList()
    }
    requestList = () => {
        Axios.requestList(this,'/order/list',{...this.params,page:this.state.page},true)
        // const _this = this
        // axios.ajax({
        //     url:'/order/list',
        //     data:{
        //         params:{...this.params,page:this.state.page}
        //         // params:{
        //         //     page:this.state.page
        //         // }
        //     }
        // }).then(res => {
        //     if(res.code === 0) {
        //         res.result.item_list.map((item,index) => {
        //             return item.key = index
        //         })
        //         this.setState({
        //             dataSource:res.result.item_list,
        //             pagination:Utils.pagination(res,(current) => {
        //                 _this.params.page = current
        //                 _this.requestList()
        //             })
        //         })
        //     }
        // })
    }
    //结束订单时，车辆信息详情
    requestBikeInfo = () => {
        Axios.ajax({
            url:'/order/ebike_info'
        }).then(res => {
            if(res.code === 0) {
                this.setState({
                    orderInfo:res.result
                })
            }
        })
    }
    //结束订单
    requestFinishInfo = () => {
        Axios.ajax({
            url:'/order/finish_order'
        }).then(res => {
            if(res.code === 0) {
                this.setState({
                    orderInfo:[],
                    showModal:false,
                    selectedRowKeys:''
                })
                message.success('订单已结束.')
                this.requestList()
            }
        })
    }
    openOrderDetail = () => {
        if(!this.state.selectedRowKeys) {
            Modal.info({
                title:'温馨提示',
                content:'请选择一个订单',
                okText:'关闭'
            })
            return
        }
        console.log(this.state.selectedRows[0])
        //带参数
        window.open(`/#/common/order/detail/${this.state.selectedRows[0].id}`,'blank')
    }
    //点击结束订单按钮，实际是显示订单车辆信息
    handleConfirm=() => {
        if(!this.state.selectedRowKeys) {
            Modal.info({
                title:'温馨提示',
                content:'请选择行程中的订单',
                okText:'关闭'
            })
            return
        }
        //只能选一个
        if(this.state.selectedRows[0].status === 2) {
            Modal.info({
                title:'温馨提示',
                content:'该订单行程已结束',
                okText:'关闭'
            })
            return
        }
        this.requestBikeInfo()
        this.setState({
            showModal:true
        })
    }
    //点击modal里面的ok按钮，即结束订单
    handleFinishOrder= () => {
        this.requestFinishInfo()
    }
    render(){
        const columns = [
            {
                title:'订单编号',
                dataIndex:'order_sn'
            },
            {
                title: '车辆编号',
                dataIndex: 'bike_sn'
            },
            {
                title: '用户名',
                dataIndex: 'user_name'
            },
            {
                title: '手机号',
                dataIndex: 'mobile'
            },
            {
                title: '里程',
                dataIndex: 'distance',
                render(distance){
                    return distance/1000 + 'Km';
                }
            },
            {
                title: '行驶时长',
                dataIndex: 'total_time'
            },
            {
                title: '状态',
                dataIndex: 'status',
                render:(status) => {
                    return status === 2 ? '行程结束' : '进行中'
                }
            },
            {
                title: '开始时间',
                dataIndex: 'start_time'
            },
            {
                title: '结束时间',
                dataIndex: 'end_time'
            },
            {
                title: '订单金额',
                dataIndex: 'total_fee'
            },
            {
                title: '实付金额',
                dataIndex: 'user_pay'
            }
        ]
        const rowSelection = {
            type:'radio',
            selectedRowKeys:this.state.selectedRowKeys,
            onChange:(selectedRowKeys,selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                this.setState({
                    selectedRowKeys,
                    selectedRows
                })
            }
        }
        const formItemLayout = {
            labelCol:{span:5},
            wrapperCol:{span:19}
        }
        return (
            <Fragment>
                <Card>
                    <BaseForm formList={this.formList} handleQuery={this.handleQuery} handleReset={this.handleReset} />
                </Card>
                <Card style={{marginTop:10}}>
                    <Button type="primary" onClick={this.openOrderDetail}>订单详情</Button>
                    <Button style={{marginLeft:20}} type="primary" onClick={this.handleConfirm}>结束订单</Button>
                </Card>
                <Table
                    style={{marginTop:-3,background:'#ffffff'}} 
                    bordered
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={this.state.dataSource}
                    pagination={this.state.pagination}
                />
                <Modal 
                    title="结束订单"
                    visible={this.state.showModal}
                    onCancel={() => {
                        this.setState({
                            showModal:false
                        })
                    }}
                    onOk={this.handleFinishOrder}
                >
                    <Form layout="horizontal">
                        <FormItem label="车辆编号" {...formItemLayout}>
                            {this.state.orderInfo.bike_sn}
                        </FormItem>
                        <FormItem label="剩余电量" {...formItemLayout}>
                            {this.state.orderInfo.battery + '%'}
                        </FormItem>
                        <FormItem label="行程开始时间" {...formItemLayout}>
                            {this.state.orderInfo.start_time}
                        </FormItem>
                        <FormItem label="当前位置" {...formItemLayout}>
                            {this.state.orderInfo.location}
                        </FormItem>
                    </Form>
                </Modal>
            </Fragment>    
        )
    }
}
/*已封装成baseForm
class FilterOrder extends React.Component{
    handleQuery = () => {
        console.log(this.props.form.getFieldsValue())
    }
    handleReset = () => {
        this.props.form.resetFields()
    }
    render(){
        const { getFieldDecorator } = this.props.form
        return (
            <Card>
                <Form layout="inline">
                    <FormItem label="城市">
                        {
                            getFieldDecorator('city',{
                                initialValue:''
                            })(
                                <Select style={{width:100}}>
                                    <SelectOption value="">全部</SelectOption>
                                    <SelectOption value="1">北京</SelectOption>
                                    <SelectOption value="2">上海</SelectOption>
                                    <SelectOption value="3">天津</SelectOption>
                                    <SelectOption value="4">杭州</SelectOption>
                                </Select> 
                            )
                        }
                    </FormItem>
                    <FormItem label="订单时间">
                        {
                            getFieldDecorator('begin_time')(
                                <DatePicker showTime={true} placeholder="选择开始时间" format="YYYY-MM-DD HH:mm:ss"/>
                            )
                        }
                    </FormItem>
                    <FormItem>
                        {
                            getFieldDecorator('end_time')(
                                <DatePicker showTime={true} placeholder="选择结束时间" format="YYYY-MM-DD HH:mm:ss"/>
                            )
                        }
                    </FormItem>
                    <FormItem label="订单状态">
                        {
                            getFieldDecorator('state',{
                                initialValue:''
                            })(
                                <Select style={{width:200}}>
                                    <SelectOption value="">全部</SelectOption>
                                    <SelectOption value="1">进行中</SelectOption>
                                    <SelectOption value="2">进行中(临时锁车)</SelectOption>
                                    <SelectOption value="3">行程结束</SelectOption>
                                </Select> 
                            )
                        }
                    </FormItem>
                    
                </Form>
            </Card>
        )
    }
}

FilterOrder = Form.create({})(FilterOrder)
*/
